<meta charset="UTF-8">

<div id="addcustomer">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.addCustomer")}}</h3>
        <div>
            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("customer.customerName")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="companyname"></i-input>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.organization")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="orgcode"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.registerDate")}} : &nbsp;</i-col>
                <i-col span="8">
                    <date-picker type="date" v-model="registerdate" style="width: 100%"></date-picker>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.legalPerson")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="jurdcperson"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.contacts")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="companyperson"></i-input>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.contactNumber")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim.number="companyphone"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.phoneNumber")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim.number="alldayphone"></i-input>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.aptitude")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="type">
                        <i-option v-for="item in operationList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                    </i-select>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.personNumber")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim.number="empcount"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.officeAddress")}} : &nbsp;</i-col>
                <i-col span="20">
                    <i-input v-model.trim="officeaddr"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.registerAddress")}} : &nbsp;</i-col>
                <i-col span="20">
                    <i-input v-model.trim="registeraddr"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.remark")}} : &nbsp;</i-col>
                <i-col span="20">
                    <i-input v-model.trim="remark"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="6" :offset="6">
                    <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                </i-col>
                <i-col span="6" :offset="1">
                    <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                </i-col>
            </Row>
        </div>
    </div>

    <script>
        new Vue({
            el: "#addcustomer",
            i18n: utils.getI18n(),
            data: {
                companyname: "", //公司名称
                orgcode: "", //机构编号
                registerdate: "", //成立日期
                jurdcperson: "", // 法人
                companyperson: "", //企业联系人
                companyphone: "", //企业联系电话
                alldayphone: "", //24小时联系电话
                empcount: "", //员工数量
                officeaddr: "", //工作地址
                registeraddr: "", //注册地址
                remark: "", //备注
                type: "", // 运营级别
                operationList: [{
                    value: 1,
                    label: isZh ? '1级资质' : 'Level 1'
                }, {
                    value: 2,
                    label: isZh ? '2级资质' : 'Level 2'
                }, {
                    value: 3,
                    label: isZh ? '3级资质' : 'Level 3'
                }]
            },
            methods: {
                handleSubmit: function() {
                    var url = myUrls.addCompany();
                    var data = {};
                    if (this.companyname !== "") {
                        data.companyname = this.companyname;
                    } else {
                        this.$Message.error(isZh ? "公司名称是必填的!" : "Company name is mandatory");
                        return;
                    }
                    this.orgcode !== "" ? data.orgcode = this.orgcode : "";
                    this.companyphone !== "" ? data.companyphone = this.companyphone : "";
                    this.registerdate !== "" ? data.registerdate = new Date(this.registerdate).getTime() : "";
                    this.jurdcperson !== "" ? data.jurdcperson = this.jurdcperson : "";
                    this.registeraddr !== "" ? data.registeraddr = this.registeraddr : "";
                    this.alldayphone !== "" ? data.alldayphone = this.alldayphone : "";
                    this.companyperson !== "" ? data.companyperson = this.companyperson : "";
                    this.empcount !== "" ? data.empcount = this.empcount : "";
                    this.empcount !== "" ? data.empcount = this.empcount : "";
                    this.officeaddr !== "" ? data.officeaddr = this.officeaddr : "";
                    this.remark !== "" ? data.remark = this.remark : "";
                    this.type !== "" ? data.type = this.type : "";
                    utils.sendAjax(url, data, this.doCallback);
                },
                doCallback: function(resp) {
                    if (resp.status == 0) {
                        this.$Message.success(isZh ? "添加成功" : "Add success");
                    } else {
                        this.$Message.error(resp.cause);
                    }
                },
                resetInfo: function() {
                    this.companyname = "";
                    this.orgcode = "";
                    this.companyphone = "";
                    this.registerdate = "";
                    this.jurdcperson = "";
                    this.alldayphone = "";
                    this.empcount = "";
                    this.empcount = "";
                    this.officeaddr = "";
                    this.remark = "";
                    this.type = "";
                    this.registeraddr = "";
                }
            }
        })
    </script>
</div>